<!-- html代码 -->
<template>
    <div>
        <!-- 头部区域 -->
        <div class="header">
            泰州市智慧城市环境监测
        </div>
        <!-- 体部区域 -->
        <div class="content">
            <div class="top">
                <div class="left">
                    <!-- 使用组件 -->
                    <div class="charts">
                        <Left1></Left1>
                    </div>
                    <div class="charts">
                        <Left2></Left2>
                    </div>
                </div>
<<<<<<< HEAD
                <div class="center"style="height:100%">
                    <Map style="height:100%"></Map>
=======
                <div class="center" style="height: 100%;">
                    <Map style="height: 100%;"></Map>
>>>>>>> 1710512daa66ff8561fed39cf79c33e401758b5e
                </div>
                <div class="right">
                    <div class="charts">
                        <Right1></Right1>
                    </div>
                    <div class="charts">
                        <Right2></Right2>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="charts">
                    <Bottom1></Bottom1>
                </div>
                <div class="charts">
                    <Bottom2></Bottom2>
                </div>
                <div class="charts">
                    <Bottom3></Bottom3>
                </div>
                <div class="charts">
                    <Bottom4></Bottom4>
                </div>
            </div>
        </div>
    </div>
</template>
<!-- js代码 -->
<script setup>
    // 引入所有组件
    import Left1 from './components/Left1.vue';
    import Left2 from './components/Left2.vue';
    import Right1 from './components/Right1.vue';
    import Right2 from './components/Right2.vue';
    import Bottom1 from './components/Bottom1.vue';
    import Bottom2 from './components/Bottom2.vue';
    import Bottom3 from './components/Bottom3.vue';
    import Bottom4 from './components/Bottom4.vue';
    import Map from './components/Map.vue';
</script>
<!-- css代码 less -->
<style lang="less" scoped>
.header {
    height: 60px;
    text-align: center;
    color: white;
    font-size: 28px;
    font-family: "楷体";
    background-image: url(../assets/layout/header.png);
    background-size: 100% 200px;
    // 行高
    line-height: 45px;
}

// 体部样式
.content {
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    .top {
        flex: 2;
        display: flex;
        .left,
        .right {
            flex: 1;
            display: flex;
            flex-direction: column;
            // &表示直接父元素 
            &>div{
                flex: 1;
            }
        }
        .center {
            flex: 2;
            background-image: url(../assets/layout/chart_center_box_bg.png);
            background-size:100% 100%;
            margin: 0px 5px 10px 5px;
<<<<<<< HEAD
       
            box-sizing: border-box;
=======
>>>>>>> 1710512daa66ff8561fed39cf79c33e401758b5e
        }
    }
    .bottom {
        flex: 1;
        display: flex;
        &>div{
            flex: 1;
        }
    }
    .charts{
        background-image: url(../assets/layout/chart_box_bg.png);
        background-size:100% 100%;
        margin: 0 5px 10px 5px;
        padding: 10px 0px 0px 10px;
        box-sizing: border-box;
    }
}
</style>